<template>
	<div class="home">
		<el-container class="home">
			<el-header height="60px" class="header">
				<Header 
				:space-list="spaceList" 
				:handlerCreate="handlerCreate"
				@uploadSelectedSpace="uploadSelectedSpace"
				></Header>
			</el-header>
			<el-container class="body">
				<el-aside width="300px" class="menu-aside">
					<Menu 
					:menu-list="docList" 
					:link="menuLink"
					class = "menu"
					></Menu>
				</el-aside>
				<el-main class="main">
					<router-view @refushMenu="refushMenu"></router-view>
				</el-main>
			</el-container>
			<el-footer height="40px" class="footer">
				<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">{{footer}}</a>
			</el-footer>
		</el-container>
	</div>
</template>

<script>
import Header from '@/components/Header'
import Menu from '@/components/Menu'
import { spaceList } from '@/api/space'
import { docList } from '@/api/doc'
import { listToTree } from '@/utils/util'
export default{
	name: 'Home',
	components: {
		Header,
		Menu
	},
	data() {
		return {
			docList: [],
			spaceList: [],
			space: '',
			currentDoc: 0,
			isEdit: false,
			isCreate: false,
			footer: import.meta.env.APP_FILING
		}
	},
	methods: {
		loadSpaceList: function(){
			let that = this
			return new Promise(function(resolve,reject){
				spaceList()
				.then((data) => {
					that.spaceList = data.data
					if(that.spaceList.length > 0){
						that.space = that.spaceList[0].id
					}
					resolve()
				})
			})
		},
		loadDocList: function(){
			docList({spaceId: this.space})
			.then((data) => {
				this.docList = listToTree(data.data)
			})
		},
		handlerCreate: function(){
			this.isCreate = true
			this.$router.push({
				path: '/edit',
				query: {
					space: this.space,
					parentId: this.currentDoc
				}
			})
		},
		uploadSelectedSpace: function(spaceId){
			this.space = spaceId
			this.loadDocList()
		},
		menuLink: function(docId){
			this.currentDoc = docId
			if(docId > 0 && !this.isEdit){
			  this.$router.push({
			  	path: 'page',
			  	query: {
			  		id: docId
			  	}
			  })
			}
		},
		updateIsCreate: function(val){
			this.isCreate = val
		},
		refushMenu: function(){
			this.loadDocList()
		}
	},
	watch: {
		'$route': function(val){
			if(!String(val.path).endsWith('edit')){
				this.isEdit = false;
				this.isCreate = false;
			}else{
				this.isEdit = true
			}
			console.log("home page watch $route modify isEdit:",this.isEdit)
		}
	},
	mounted() {
		this.loadSpaceList()
		.then(() => {
			console.log(this.space)
			this.loadDocList()
		})
		
	}
}
</script>

<style scoped>
.home{
	width: 100%;
	height: 100%;
	background-color: aliceblue;
}
.header{
	background-color: #409EFF;
}
.body{
	background-color: #F0F2F5;
}
.menu-aside{
	height: calc(100vh - 100px);
}
.menu{
	width: 100%;
	height: 100%;
	overflow-y: auto;
}
.menu::-webkit-scrollbar{
	width: 1px;
}
.main{
	background-color: #FFFFFF;
}
.footer{
	background-color: #409EFF;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
}
.footer a {
	text-decoration: none;
	color: #FFFFFF;
}
</style>
